<template>
  <Drawer :visible="props.showModal" width="800" @close="modalCancelFn">
    <!--   【1】基础信息   -->
    <h2 class="title-sign">基础信息</h2>
    <Row class="base-info">
      <Col v-for="item in state.baseInfoList" :key="item.name" style="line-height: 30px" :span="8">{{ item.name }} : {{ props.curData[item.key] }} </Col>
    </Row>
    <!--   【2】检测结果   -->
    <h2 class="title-sign">检测结果</h2>
    <div class="base-info">
      <div>{{ props.curData?.checkResult }}</div>
      <div style="display: flex; margin: 10px 0">
        <span>查看报告：</span>
        <span style="display: flex; flex-direction: column; margin-left: 15px">
          <a v-for="(item, index) in props.curData?.attachments" :key="index" style="text-decoration: underline; margin-bottom: 5px" :href="`${baseUrl}/file/download/${item.md5}`" type="download">{{
            item.name
          }}</a>
        </span>
      </div>
    </div>
    <!--   【3】分装信息   -->
    <h2 class="title-sign">分装信息</h2>
    <div class="base-info">
      <div>分装来源：</div>
      <vxe-table style="margin-top: 15px" :data="props.curData?.parentInstance ? [props.curData?.parentInstance] : []">
        <vxe-column field="createTime" title="分装时间" />
        <vxe-column field="specimenSerial" title="样本编号" />
        <vxe-column field="specimenName" title="样本名称" />
        <vxe-column field="serial" title="数字编号" />
        <vxe-column field="creatorName" title="操作人" :formatter="() => props.curData?.parentInstance?.creatorName" />
      </vxe-table>
      <div style="margin-top: 10px">分装结果：</div>
      <vxe-table style="margin: 15px 0" :data="props.curData?.childrenList">
        <vxe-column type="seq" title="序号" width="60" />
        <vxe-column field="createTime" title="分装时间" />
        <vxe-column field="specimenSerial" title="样本编号" />
        <vxe-column field="specimenName" title="样本名称" />
        <vxe-column field="capacity" title="容量" :formatter="({ row }) => `${unitCheck(row.capacity, row.unit)}`" />
        <vxe-column field="serial" title="数字编号" />
        <vxe-column field="creatorName" title="操作人" />
      </vxe-table>
    </div>
    <!--   【4】入库信息   -->
    <h2 class="title-sign">入库信息</h2>
    <div class="base-info">
      <div style="display: flex">
        <div>入库时间：{{ state.storageInfo?.finishTime }}</div>
        <div style="margin: 0 50px">入库人：{{ state.storageInfo?.userName }}</div>
        <div>操作人：{{ state.storageInfo?.operatorName }}</div>
      </div>
      <div style="margin: 10px 0">存放位置：{{ state.storageInfo?.stocks?.length > 0 && state.storageInfo?.stocks[0]?.storageDesp }}</div>
      <div style="display: flex">
        <span>存档文件：</span>
        <span style="display: flex; flex-direction: column">
          <a v-for="(item, index) in state.storageInfo?.attachments" :key="index" :href="`${baseUrl}/file/download/${item.md5}`" target="_self" style="text-decoration: underline; margin-bottom: 5px">
            {{ item.name }}
          </a>
        </span>
      </div>
    </div>
  </Drawer>
</template>

<script setup lang="ts">
import { Drawer, Row, Col } from 'ant-design-vue';
import { getcustomerFormData } from '@/api/public';
import { reactive, watch } from 'vue';
import { getStorageInfoById } from '@/modules/sample-inventory/api';
import config from '@/config';
import { unitCheck } from '@/libs/utils';

/**
 * const
 */
const props = withDefaults(
  defineProps<{
    showModal: boolean;
    curData: any;
    subData: any;
  }>(),
  {
    showModal: false,
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
}>();
const state: {
  baseInfoList: any;
  storageInfo: any;
} = reactive({
  baseInfoList: [],
  storageInfo: {},
});
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro;

/**
 * base-info
 */
const getBaseInfo = async () => {
  const res = await getcustomerFormData({ groupId: props.subData.formworkId });
  state.baseInfoList = res.result;
};
watch(
  () => props.showModal,
  (newVal) => {
    if (newVal) {
      getBaseInfo();
      getStorageInfoFn();
    }
  },
);
const getStorageInfoFn = async () => {
  const res = await getStorageInfoById(props.subData?.id);
  state.storageInfo = res.result;
};

/**
 * drawer
 */
const modalCancelFn = () => {
  state.baseInfoList = [];
  state.storageInfo = {};
  emits('update:showModal', false);
};
</script>

<style scoped lang="less">
.title-sign {
  font-weight: 700;
}
.base-info {
  padding: 0 20px;
}
</style>
